<template>
  <div class="topbar">
    <div class="pull-left logo-wrapper">
      <a href="/" class="logo">{{ GLOBAL.SYSTEMNAME }}</a>
    </div>
    <div class="pull-right topbar-info">
      <div class="topbar-info-item topbar-tip">欢迎您回来, {{ name }}</div>
      <el-dropdown class="topbar-info-item user-box">
        <div class="avatar-wrap">
          <el-badge :value="notifyList.length" class="item">
            <i class="el-icon-bell i-bell"/>
          </el-badge>
        </div>
        <el-dropdown-menu slot="dropdown" class="notify-dropdown">
          <el-dropdown-item v-for="(item, idx) in notifyList" :key="idx">
            <div @click="gotoNotify">
              <span class="nl-icon" v-if="item.isImportant">
                <i class="icon i-hot"></i>
              </span>
              <span class="sys">[系统]</span>
              <span class="cont"> {{item.describe}}</span>
            </div>
          </el-dropdown-item>
          <el-dropdown-item command="e" divided class="notify-more">
            <span class="txt-center" @click="gotoNotify">查看全部</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <el-dropdown class="topbar-info-item user-box">
        <div class="avatar-wrap">
          <div class="user-avatar">
            <i class="iconfont icon-user"></i>
          </div>
          <i class="el-icon-caret-bottom"/>
        </div>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item v-if="roleKey != 'mark_teacher'">
            <span style="display:block;" @click="updateInfo">个人信息</span>
          </el-dropdown-item>
          <el-dropdown-item v-if="roleKey != 'mark_teacher'">
            <span style="display:block;" @click="updatePsd">修改密码</span>
          </el-dropdown-item>
          <el-dropdown-item :divided="roleKey != 'mark_teacher'">
            <span style="display:block;" @click="logout">退出登录</span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'topbar',
  props: ['show', 'name'],
  data () {
    return {
      roleKey: null,
      notifyList: [
        {
          cont: '镇海区管理员已上报了编排结果',
          date: '03月12日   09:11'
        },
        {
          cont: '您已通过海曙区的上报编排结果',
          date: '03月12日   09:11'
        },
        {
          cont: '您未通过江北区的上报编排结果',
          date: '03月12日   09:11'
        }
      ]
    }
  },
  computed: mapState({
    changeNotify: state => state.changeNotify
  }),
  created () {
    this.roleKey = JSON.parse(sessionStorage.getItem('userData')).roleKey
    this.getAllNotify()
    console.log(this.roleKey)
  },
  methods: {
    logout () {
      this.$http.logout('').then(res => {
        this.$router.push({ name: 'login' })
        sessionStorage.clear()
      })
    },
    updatePsd () {
      this.$emit('updatePsd')
    },
    showInfo () {
      this.$emit('showInfo')
    },
    updateInfo () {
      this.$emit('updateInfo')
    },
    gotoNotify () {
      this.$router.push({ name: 'notify' })
    },
    getAllNotify () {
      this.$http.getAllOrganize().then(res => {
        if (res.size > 0) {
          this.notifyList = res.data
        } else {
          this.notifyList = []
        }
      })
    }
  },
  watch: {
    changeNotify() {
      this.getAllNotify()
    }
  }
}
</script>

<style lang="scss">
.avatar-wrap .el-badge{
  height: 36px;
  vertical-align: middle;
  line-height: 36px;
}
.avatar-wrap .el-badge__content.is-fixed{
  top: 8px;
}
.avatar-wrap .el-badge__content{
  height: 14px;
  line-height: 14px;
  padding: 0 3px;
  border:none;
}
.notify-dropdown{
  text-align: center;
  .notify-more{
    background-color: #fff !important;
    &:hover{
      text-decoration: underline;
    }
  }
}
</style>

<style lang="scss" scoped>
.topbar{
  height: 50px;
  background:rgba(27,32,42,1);
  box-shadow:0px 0px 6px 0px rgba(0, 0, 0, 0.3);
  width: 100%;
  left: 0;
  top: 0;
  position: fixed;
  z-index: 1030!important;
  .logo-wrapper{
    height: 50px;
    line-height: 50px;
    padding: 0 12px;
    font-size:18px;
    font-weight:bold;
    color:rgba(255,255,255,1);
    margin-left: 10px;
    .logo{
      color: #fff;
      text-decoration: none;
    }
  }
  .topbar-info{
    margin-right: 10px;
    .topbar-info-item{
      display: inline-block;
      padding: 0 12px;
      vertical-align: middle;
      height: 50px;
      line-height: 50px;
      position: relative;
    }
    .topbar-tip{
      color: #fff;
    }
    .avatar-wrap{
      cursor: pointer;
      height: 50px;
    }
    .user-avatar{
      width:36px;
      height:36px;
      background:rgba(65,119,255,1);
      border-radius:50%;
      margin-top: 7px;
      margin-right: 6px;
      display: inline-block;
      text-align: center;
      line-height: 36px;
      .iconfont{
        font-size: 24px;
        color: #fff;
      }
    }
    .user-info {
      position: absolute;
      top: 50px;
      left: -20px;
      background: #fff;
      padding: 4px 12px;
      box-shadow: 0 0 0px 1px #f3f3f3;
      border-radius: 3px;
      transition: 1s all;
      &::before {
        content: '';
        position: absolute;
        top: -10px;
        right: 21px;
        width: 0px;
        height: 0px;
        border-left: 3px solid transparent;
        border-top: 3px solid transparent;
        border-right: 3px solid transparent;
        border-bottom: 6px solid #fff;
      }
      li {
        line-height: 36px;
        font-size: 12px;
        cursor: pointer;
        text-align: center;
        &:hover {
          color: rgba(65,119,255,1);
        }
      }
    }
  }
}
.i-bell{
  font-size: 22px;
  color: #fff;
  vertical-align: middle;
}
.notify-dropdown{
  width:230px;
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
  .nl-icon{
    width: 20px;
    display: inline-block;
    text-align: center;
    position: absolute;
    left: 5px;
  }
  .icon{
    background-position: center;
    background-size: contain;
    display: inline-block;
    margin: auto;
    vertical-align: middle;
  }
  .i-hot{
    background-image: url("../assets/img/sidebar/hot.png");
    width: 11px;
    height: 13px;
  }
  .sys{
    font-size: 13px;
    margin-right: 5px;
    font-weight: bold;
  }
  .cont{
    margin-right: 20px;
  }
  .el-dropdown-menu__item{
    line-height: 20px;
    font-size: 13px;
    padding: 5px 8px;
    padding-left: 25px;
    position: relative;
  }
}
</style>
